import React from 'react';
import style from './style.module.scss';
import { useBoolean } from 'ahooks';

interface ItemState {
  id: string
  name: string
}

interface PropsType {
  content: ItemState
  onChange?: (value: ItemState) => void
  list: ItemState[]
}

export const WdSelectItem: React.FC<PropsType> = ({ content, onChange, list }) => {
  const [show, { toggle, setFalse }] = useBoolean(false);
  const handleClick = (v: ItemState) => {
    setFalse();
    onChange && onChange(v)
  }
  return (
    <div className={style.select}>
      <div className={style.item} onClick={() => toggle()}>
        <span className={style.title}>{content.name}</span>
        <span className={`${style.arrow} ${show ? style.active : ''}`}>^</span>
      </div>
      <ul className={style.content} style={{ display: show ? 'flex' : 'none' }}>
        {
          list.map((v, i) => {
            return <li className={style.li} key={i} onClick={() => handleClick(v)}>{v.name}</li>
          })
        }
      </ul>
    </div>
  )
}

